Order Steps Edition 2
03/29/2006 by Destra (destrasolutions.ca)

This script is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE.

Released under the General Public License (see http://www.gnu.org/licenses/gpl.txt)

Always backup your shop and database before making changes.

This contribution has been tested on Zen Cart v 1.2.7.
The CSS is tested on Internet Explorer 6 with SP2, Firefox 1.0.6

A thank you should go out to Frank Koehl and Hans de Zwart. I have used his layout (used in 'super orders') for this file.

==================================
Why Edition 2?
==================================
No real reason.  Just another option that some ZenCart users may like better.

==================================
Find a bug?  Have a feature idea?
==================================
If you have any comments, questions or ideas about this contribution please ask them in the Zen Cart forums (there should be a thread called 'Order Steps' or PM me.

====================
  DESCRIPTION
====================
To me ordering in Zencart is a four step process:
1. Choose Shipping method
2. Choose Payment method
3. Review your order (and confirm)
4. Order done

See edition_2_screenshot.gif for demo of what the contrib will resemble when done. On each page in the checkout process the correct step is highlighted in the line with an arrow above it.  Everything can be changed in the stylesheet except the arrow picture which can be changed by replacing checkout_arrow.gif by any GIF that is 24X24.

Destra

====================
  INSTALLATION
====================

You need to add text to the following files:

in /includes/templates/template_default/templates/ (or /includes/templates/YOUR_TEMPLATE/templates/)
- tpl_checkout_shipping_default.php
- tpl_checkout_payment_default.php
- tpl_checkout_confirmation_default.php
- tpl_checkout_success_default.php

in /includes/languages/ (or /includes/languages/YOUR_TEMPLATE/)
- english.php
- OTHER_LANGUAGES.php

in /includes/templates/template_default/css/ (or /includes/templates/YOUR_TEMPLATE/css/)
- stylesheet.css

in /includes/templates/clasic/images/ (or /includes/templates/YOUR_TEMPLATE/images/)
- arrow_checkout.gif

Let us start. Although you don't need to remove the code:

  <tr>
    <td class="pageHeading" colspan="3"><h1><?php echo HEADING_TITLE; ?></h1></td>
  </tr>

leaving it seems redundant.  Test and make your own decision.

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_shipping_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_shipping_default.php
---------------------------------------
FIND:

<h1 id="checkoutShippingHeading"><?php echo HEADING_TITLE; ?></h1>

ADD AFTER:

<tr><td class="main" colspan="3">
    <div class="order_steps">
       <table class="order_steps" cellspacing="0">
            <tr><td class="order_steps_text" id="active_step_text"><img src="<?php echo DIR_WS_TEMPLATE; ?>images/arrow_checkout.gif" width="24" height="24" alt="" border="0" align=""><br /><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text"><br /><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text"><br /><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text"><br /><?php echo TEXT_ORDER_STEPS_4; ?></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="progressbar_active"></td><td class="progressbar_inactive"></td><td class="progressbar_inactive"></td><td class="progressbar_inactive"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="progressbar_active_shadow"></td><td class="progressbar_inactive_shadow"></td><td class="progressbar_inactive_shadow"></td><td class="progressbar_inactive_shadow"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_payment_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_payment_default.php
---------------------------------------
FIND:

<h1 id="checkoutPaymentHeading"><?php echo HEADING_TITLE; ?></h1>

ADD AFTER:

<tr><td class="main" colspan="3">
    <div class="order_steps">
        <table class="order_steps" cellspacing="0">
            <tr>
                <td class="order_steps_text_completed"><br /><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text" id="active_step_text"><img src="<?php echo DIR_WS_TEMPLATE; ?>images/arrow_checkout.gif" width="24" height="24" alt="" border="0" align=""><br /><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text"><br /><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text"><br /><?php echo TEXT_ORDER_STEPS_4; ?></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="progressbar_active"></td><td class="progressbar_active"></td><td class="progressbar_inactive"></td><td class="progressbar_inactive"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="progressbar_active_shadow"></td><td class="progressbar_active_shadow"></td><td class="progressbar_inactive_shadow"></td><td class="progressbar_inactive_shadow"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_confirmation_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_confirmation_default.php
---------------------------------------
FIND:

<h1 id="checkoutConfirmDefaultHeading"><?php echo HEADING_TITLE; ?></h1>

ADD AFTER:

<tr><td class="main" colspan="3">
    <div class="order_steps">
        <table class="order_steps" cellspacing="0">
            <tr>
                <td class="order_steps_text_completed"><br /><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text_completed"><br /><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text" id="active_step_text"><img src="<?php echo DIR_WS_TEMPLATE; ?>images/arrow_checkout.gif" width="24" height="24" alt="" border="0" align=""><br /><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text"><br /><?php echo TEXT_ORDER_STEPS_4; ?></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="progressbar_active"></td><td class="progressbar_active"></td><td class="progressbar_active"></td><td class="progressbar_inactive"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="progressbar_active_shadow"></td><td class="progressbar_active_shadow"></td><td class="progressbar_active_shadow"></td><td class="progressbar_inactive_shadow"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_success_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_succes_default.php
---------------------------------------
FIND:

<h1 id="checkoutSuccessHeading"><?php echo HEADING_TITLE; ?></h1>

ADD AFTER:

<tr><td class="main">
    <div class="order_steps">
        <table class="order_steps" cellspacing="0">
            <tr>
                <td class="order_steps_text_completed"><br /><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text_completed"><br /><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text_completed"><br /><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text" id="active_step_text"><img src="<?php echo DIR_WS_TEMPLATE; ?>images/arrow_checkout.gif" width="24" height="24" alt="" border="0" align=""><br /><?php echo TEXT_ORDER_STEPS_4; ?></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="progressbar_active"></td><td class="progressbar_active"></td><td class="progressbar_active"></td><td class="progressbar_active"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="progressbar_active_shadow"></td><td class="progressbar_active_shadow"></td><td class="progressbar_active_shadow"></td><td class="progressbar_active_shadow"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/languages/english.php (or /includes/languages/YOUR_TEMPLATE/english.php) and your other language files)
---------------------------------------
FIND:

///////////////////////////////////////////////////////////
// include email extras
  if (file_exists(DIR_WS_LANGUAGES . $_SESSION['language'] . '/' . $template_dir . '/' . FILENAME_EMAIL_EXTRAS)) {

ADD BEFORE:

// Order Steps Edition 2
define('TEXT_ORDER_STEPS_1', 'Shipping Method');
define('TEXT_ORDER_STEPS_2', 'Payment Method');
define('TEXT_ORDER_STEPS_3', 'Review Order');
define('TEXT_ORDER_STEPS_4', 'Order Complete');

---------------------------------------
IN THE FILE - /includes/templates/clasic/css/stylesheet_original.css (or /includes/templates/YOUR_TEMPLATE/css/stylesheet.css)
---------------------------------------
FIND THE END OF THE FILE AND ADD:

/* This is the CSS needed for the Order Step Edition 2 contribution */

div.order_steps {       /* Is needed for the centering in IE */
    width: 100%
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    text-align: center;
}

table.order_steps {
    margin-left: auto;
    margin-right: auto;
    width: 80%;       /* Here you can set the total width of this contrib */
    padding-bottom: 10px;
    background-color: transparent;      /* Here you can change the background-color of the whole contrib */
}

tr.order_steps_line_2 {
    height: 5px;        /* Is a part in determining the height of the line */
    padding: 0px;
    margin: 0px;
}

tr.order_steps_line_3 {
    height: 1px;        /* Is a part in determining the height of the line shadow */
    padding: 0px;
    margin: 0px;
}

td.progressbar_active {
    background-color: #3DA200;     /* Determines the active color of the completed part of the line */
    width: 4%;
    padding: 0px;
    margin: 0px;
}

td.progressbar_inactive {
    width: 4%;
    background-color: #9A9A9A;    /* Determines the non-active color of the uncompleted part of the line */
    padding: 0px;
    margin: 0px;
}

td.progressbar_active_shadow {
    background-color: #346C00;     /* Determines the non-active color of the completed part of the line shadow */
    width: 4%;
    padding: 0px;
    margin: 0px;
}

td.progressbar_inactive_shadow {
    width: 4%;
    background-color: #666666;   /* Determines the non-active color of the uncompleted part of the line line*/
    padding: 0px;
    margin: 0px;
}

td.order_steps_text {
    text-align: center;
    vertical-align: top;
    color: #A7A7A7;        /* Determines the non-active color of the text */
    padding-bottom: 5px; /* Determines the distance between the text and the line */
}

td.order_steps_text_completed {
    text-align: center;
    vertical-align: top;
    color: #8DB18D;        /* Determines the non-active color of the text steps that have been completed*/
    padding-bottom: 10px; /* Determines the distance between the text and the line */
}

td#active_step_text {       /* These are the styles for the active text */
    color: #005C2C;
    font-weight: 700;
    font-size: 1.1em;
}

/* End Order Steps contribution CSS */

====================
  TUNING
====================

Change colours and feel in the stylesheet.

====================
  FUTURE PLANS
====================

- I think a nice feature to add would be to make the texts for the different steps links the relevant pages. Of course you can only go back or go one step ahead. I do not think it will be hard to do (it would probably only require a bit of CSS and a different define for the texts.
- Making a 3D type progress bar using a cutup pill like button.  This would actually be easy to implement so if you want it bug me and I will see what I can do.


Upraveno pro verzi 1.3, poslupujte podle upraveneho navodu, jsou prilozene i soubory, ktere se maji menit, avsak nekopirujte jej, ale upravte to podle navodu, jsou jen jako priklady.
